<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<span>点击的次数 ：  {{num}}</span>
			<!-- click 的值 是表达式， 我们可以动态拿到vue，data属性中的数据然后进行操作-->
			<button type="button" v-on:click="num++">+1</button>
			<!--dblclick 双击  -->
			<button type="button" v-on:dblclick="num++">双击</button>
			
			<button type="button" @click="clicktwo()">只能+2次</button>
			
			<p>{{msg}}</p>
			<!-- 不传参的时候可以不写圆括号,直接写函数名 -->
			<button @click="rString" type="button">反转</button>
			<!-- 使用{{}} 调用方法必须写圆括号 -->
			<span>{{testString()}}</span>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
				   num:0,
				   msg:"abcdefg"
				},
				methods:{//
					// methods中是用来存放函数，这里面的函数会自动成为vue实例的方法
					testString:function(){
						var hobby=["吃饭","睡觉","打豆豆"]
						return hobby;
					},
					// 限制最大点击次数
					clicktwo:function(){
						
						console.log(this==vm)//true
						var n= vm.num;
					    vm.num=Math.min(++n,2);
					},
					rString(){
						// 将字符反转   分割，反转，拼接
					        this.msg=this.msg.split('').reverse().join(' ')
					}
					
				}
			})
		</script>
	</body>
</html>
